<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import SupplierQuotation from "@/views/supplier/SupplierEnd/SupplierQuotation.vue";
import {
  queryQuotationById,
  querySupplierQuotation,
  changeStatus,
  saveReason
} from "@/api/supplierQuotation.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteDict } from "@/api/dict";
const router = useRouter();

//重置查询条件
const supplierQuotation = ref({
  subCode: "",
  pid: "",
  productname: "",
  status: ""
});

//
const supplierQuotationOptions = ref([
  {
    name: "待报价",
    id: 1
  },
  {
    name: "已报价",
    id: 2
  },
  {
    name: "待审核",
    id: 3
  },
  {
    name: "待修改",
    id: 4
  },
  {
    name: "未通过",
    id: 5
  },
  {
    name: "砍价修改",
    id: 6
  }
]);

//绑定修改申请
const changeReason = ref();

//绑定表单数据
const tableData = ref([]);
//绑定表格数据
const SupplierQuiry = ref([
  {
    code: "123"
  }
]);
//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//弹出框
const centerDialogVisible = ref(false);

let currentRow = ref();
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}

// 处理表格行点击事件
const handleRowClick = row => {
  // 将当前点击行的数据赋值给 currentRow
  currentRow.value = row;
  centerDialogVisible.value = true;
};

//查询供应商报价单
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    subCode: supplierQuotation.value.subCode,
    pid: supplierQuotation.value.pid,
    productname: supplierQuotation.value.productname,
    status: supplierQuotation.value.status
  };
  let res = await querySupplierQuotation(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//重置
function reset() {
  (supplierQuotation.value.subCode = ""),
    (supplierQuotation.value.pid = ""),
    (supplierQuotation.value.productname = ""),
    (supplierQuotation.value.status = "");
  initData();
}

//点击报价跳到报价信息页面
async function quotation(row) {
  let id = row.id;
  //根据类型跳转
  let res = await queryQuotationById(id);
  if (res.code == 200) {
    switch (res.data.productType) {
      //产品询价
      case 1001:
        router.push({
          path: "/SupplierQuotation/CPXJ",
          query: { id }
        });
        break;
      //筛网
      case 1002:
        router.push({
          path: "/SupplierQuotation/SWXJ",
          query: { id }
        });
        break;
      //托辊
      case 1003:
        break;
    }
  }
}

//保存修改申请
async function saveQuoReason() {
  console.log(currentRow.value.id);
  console.log(changeReason.value);
  let data = {
    id: currentRow.value.id,
    supplierQuotationRequest: {
      note: changeReason.value
    }
  };
  let res = await saveReason(data);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    currentRow.value = "";
    centerDialogVisible.value = false;
    changeReason.value = "";
  }
}
//关闭修改申请
function closeReason() {
  ElMessageBox.confirm("确定要取消申请？", "取消", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning"
  })
    .then(async () => {
      centerDialogVisible.value = false;
      changeReason.value = "";
    })
    .catch(() => {});
}

onBeforeMount(() => {
  initData();
});
</script>

<template>
  <div>
    <div
      style="
        height: 50px;
        background-color: rgba(54, 58, 119, 0.19);
        line-height: 50px;
      "
    >
      <p style="margin-left: 20px">产品询价</p>
    </div>
    <el-form style="margin-top: 20px">
      <el-row>
        <el-col style="margin-left: 10px" :span="6">
          <el-form-item label="询价编号">
            <el-input
              v-model="supplierQuotation.subCode"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col style="margin-left: 10px" :span="6">
          <el-form-item label="产品编号">
            <el-input v-model="supplierQuotation.pid" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-left: 10px" :span="6">
          <el-form-item label="产品名称">
            <el-input
              v-model="supplierQuotation.productname"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col style="width: 150px; margin-left: 10px" :span="5">
          <el-form-item label="状态">
            <el-select v-model="supplierQuotation.status">
              <el-option
                v-for="item in supplierQuotationOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-left: 20px" :span="5">
          <el-button type="primary" @click="initData">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData">
      <el-table-column prop="subCode" label="询价编号" />
      <el-table-column prop="createTime" label="询价时间" />
      <el-table-column prop="status" label="报价状态">
        <template v-slot="{ row }">
          <!--          1待报价 2已报价 3待审核 4待修改 5未通过 6砍价修改-->
          <span v-if="row.status == 1">待报价</span>
          <span v-else-if="row.status == 2">已报价</span>
          <span v-else-if="row.status == 3">待审核</span>
          <span v-else-if="row.status == 4">待修改</span>
          <span v-else-if="row.status == 5">未通过</span>
          <span v-else-if="row.status == 6">砍价修改</span>
        </template>
      </el-table-column>
      <el-table-column prop="note" label="修改描述" />
      <el-table-column prop="reason" label="原因" />

      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-link
            v-if="row.status == 1 || row.status == 4 || row.status == 6"
            style="padding-left: 10px; color: dodgerblue"
            :underline="false"
            @click="quotation(row)"
            >报价</el-link
          >
          <el-link
            v-if="row.status == 2 || row.status == 5"
            style="padding-left: 10px; color: dodgerblue"
            :underline="false"
            @click="handleRowClick(row)"
            >修改申请</el-link
          >
          <el-link
            v-if="row.status == 2 || row.status == 3 || row.status == 5"
            style="padding-left: 10px; color: dodgerblue"
            :underline="false"
            >查看报价</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <!--      修改申请弹出框-->
      <el-dialog
        v-model="centerDialogVisible"
        title="修改申请"
        width="500"
        style="text-align: left"
        :close-on-click-modal="false"
      >
        <el-form>
          <el-form-item label="修改原因:">
            <el-input
              v-model="changeReason"
              type="textarea"
              :rows="8"
              style="margin: auto"
            />
            <el-button
              style="margin-top: 10px"
              type="primary"
              @click="saveQuoReason"
              >保存</el-button
            >
            <el-button style="margin-top: 10px" type="info" @click="closeReason"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
